<template>
    <div class="home-container">
        <div class="content">
            <div class="left">
                <img class="map_img" :src="mapURL" alt="" />
                <div
                    class="home_items one animate__animated animate__fadeInDown"
                >
                    <div class="desc">
                        <p>21500<span>余万元</span></p>
                        <p>成交金额</p>
                    </div>
                </div>
                <div class="home_items two animate__animated animate__fadeInUp">
                    <div class="desc">
                        <p>20000<span>+</span></p>
                        <p>供应商入驻</p>
                    </div>
                </div>
                <div
                    class="home_items three animate__animated animate__fadeInUp"
                >
                    <div class="desc">
                        <p>18000<span>+</span></p>
                        <p>平台会员</p>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title_box">
                    <img
                        class="
                            title_img
                            animate__animated animate__fadeInTopLeft
                        "
                        :src="
                            require('@/assets/images/supplier_right_title01.png')
                        "
                    />
                    <img
                        class="
                            title_img
                            animate__animated animate__fadeInTopRight
                        "
                        :src="
                            require('@/assets/images/supplier_right_title02.png')
                        "
                    />
                    <!-- <div
                        class="title1 animate__animated animate__fadeInTopLeft"
                    >
                        你有优质资源？
                    </div>
                    <div
                        class="title2 animate__animated animate__fadeInTopRight"
                    >
                        一键快速注册
                    </div> -->
                </div>
                <el-form
                    ref="registerForm"
                    :model="registerForm"
                    :rules="rules"
                    class="register_form"
                >
                    <el-form-item prop="companyName">
                        <el-input
                            v-model="registerForm.companyName"
                            placeholder="您的企业名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="phoneNumber">
                        <el-input
                            v-model="registerForm.phoneNumber"
                            placeholder="您的手机号"
                        ></el-input>
                    </el-form-item>
                    <div
                        class="submit_btn"
                        @click="submitRegister"
                        :loading="loading"
                    >
                        立即注册
                    </div>
                    <el-form-item prop="checked">
                        <el-checkbox v-model="registerForm.checked"
                            >我已阅读并接受以下条款：</el-checkbox
                        >
                    </el-form-item>
                </el-form>
                <div class="pact">
                    <el-link
                        type="primary"
                        :underline="false"
                        href=""
                        target="_blank"
                        >《智慧城建产品注册协议》</el-link
                    >
                    <el-link
                        type="primary"
                        :underline="false"
                        href=""
                        target="_blank"
                        >《云采商城推广服务合同》</el-link
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        const CTel = (rule, value, callback) => {
            if (!value) {
                callback(new Error("手机号不能为空"));
            } else {
                const reg =
                    /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    callback(new Error("请输入正确的手机号"));
                }
            }
        };
        return {
            registerForm: {
                companyName: "",
                phoneNumber: "",
                checked: false,
            },
            loading: false,
            mapURL: require("@/assets/images/home_map.png"),
            rules: {
                companyName: [
                    {
                        required: true,
                        message: "请输入您的企业名称",
                        trigger: "blur",
                    },
                ],
                phoneNumber: [
                    { required: true, validator: CTel, trigger: "blur" },
                ],
            },
        };
    },
    mounted() {
        console.log(`this.`, this.$router.options.routes);
    },
    methods: {
        submitRegister() {
            this.$refs["registerForm"].validate((valid) => {
                if (valid) {
                    console.log(`valid`, valid);
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.home-container {
    color: #ffffff;
    .main-bg();
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            width: 682px;
            height: 100%;
            position: relative;
            .map_img {
                position: absolute;
                left: -60px;
                bottom: 0px;
                width: auto;
                height: 85%;
            }
            .home_items {
                width: auto;
                height: 83px;
                position: absolute;
                display: flex;
                justify-content: flex-start;
                &::before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 83px;
                    background: url("../../assets/images/home_icon_left.png")
                        top left no-repeat;
                }
                &::after {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 83px;
                    background: url("../../assets/images/home_icon_right.png")
                        top left no-repeat;
                }
                .desc {
                    width: auto;
                    height: 83px;
                    background: url("../../assets/images/home_icon_repeat.png")
                        top left repeat-x;
                    box-sizing: border-box;
                    padding: 10px 15px 0 5px;
                    p:nth-child(1) {
                        color: #222222;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 28px;
                        vertical-align: bottom;
                        span {
                            color: #0181ff;
                            font-size: 17px;
                            margin-left: 5px;
                        }
                    }
                    p:nth-child(2) {
                        color: #565f69;
                        font-size: 14px;
                        margin-top: 3px;
                    }
                }
            }
            @media screen and (min-width: 1365px) {
                .one {
                    top: 24%;
                    left: 43%;
                    animation-delay: 0.2s;
                }
                .two {
                    top: 35%;
                    right: -25%;
                    animation-delay: 0.4s;
                }
                .three {
                    top: 60%;
                    right: -10%;
                    animation-delay: 0.6s;
                }
            }
            @media screen and (max-width: 1366px) {
                .one {
                    top: 20%;
                    left: 25%;
                    animation-delay: 0.2s;
                }
                .two {
                    top: 35%;
                    right: 0%;
                    animation-delay: 0.4s;
                }
                .three {
                    top: 60%;
                    right: 13%;
                    animation-delay: 0.6s;
                }
            }
        }
        .right {
            width: 240px;
            height: auto;
            position: relative;
            margin-right: 50px;
            overflow: hidden;
            .title_box {
                height: 70px;
                font-size: 24px;
                font-weight: 600;
                position: relative;
                margin-bottom: 30px;
                .title_img {
                    width: 205px;
                    height: 26px;
                    position: absolute;
                    &:nth-child(1) {
                        top: 0;
                        left: 0;
                    }
                    &:nth-child(2) {
                        bottom: 0;
                        right: 0;
                    }
                }
                // .title1,
                // .title2 {
                //     width: 100%;
                //     position: absolute;
                //     top: 0;
                //     letter-spacing: 2px;
                //     height: 1em;
                //     line-height: 1em;
                //     color: #222222;
                //     white-space: nowrap;
                //     &::before {
                //         content: "";
                //         position: absolute;
                //         bottom: 0;
                //         left: 0;
                //         width: 100%;
                //         height: 9px;
                //         background-image: linear-gradient(
                //             to right,
                //             transparent,
                //             #45a0f9
                //         );
                //     }
                // }
                // .title1 {
                //     text-align: left;
                //     // transition: 0.5s;
                //     // animation-delay: 5s;
                //     &::before {
                //         content: "";
                //         position: absolute;
                //         bottom: 0;
                //         left: 0;
                //         width: 100%;
                //         height: 9px;
                //         background-image: linear-gradient(
                //             to right,
                //             #45a0f9,
                //             transparent
                //         );
                //     }
                // }
                // .title2 {
                //     top: 2em;
                //     text-align: right;
                // }
            }
            .submit_btn {
                .default-btn();
                width: 100%;
            }
            .pact {
                text-align: center;
                font-size: 12px;
                line-height: 20px;
                .el-divider__text,
                .el-link {
                    font-size: inherit;
                }
            }
        }
    }
}
</style>